<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./template/VisitorTemplate.xhtml">
    <ui:define name="begin">
        <f:view beforePhase="#{purchaseGrouponManagerBean.initVisitorMakeOrder}"></f:view>
    </ui:define>

    <ui:define name="contentInsert">   
        <h:body>
            <h:form id="form1">
                <p:growl id="growl" showDetail="true" />
                <br/>
                <br/>
                <p:fieldset style="position:relative; width:950px">
                    <h2>YOUR ORDER</h2>
                    <br/>
                    <h:panelGrid columns="6" cellpadding="5" frame="above" style="text-align:left">
                        <h:outputText value="Description" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="Amount" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="Single Amount" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="Total Amount" style="font-weight:bold; font-size:12px"/>

                        <h:outputText value="#{purchaseGrouponManagerBean.selectedGroupon.groupon.name}" style="font-weight:bold; font-size:12px"/>
                        <h:selectOneMenu value="#{purchaseGrouponManagerBean.purchase.quantity}" id="quantity" >
                            <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                            <f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
                            <f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
                            <f:selectItem itemLabel="4" itemValue="4"></f:selectItem>
                            <f:selectItem itemLabel="5" itemValue="5"></f:selectItem>
                            <f:selectItem itemLabel="6" itemValue="6"></f:selectItem>
                            <f:selectItem itemLabel="7" itemValue="7"></f:selectItem>
                            <f:selectItem itemLabel="8" itemValue="8"></f:selectItem>
                            <f:selectItem itemLabel="9" itemValue="9"></f:selectItem>
                            <f:selectItem itemLabel="10" itemValue="10"></f:selectItem>
                            <f:selectItem itemLabel="11" itemValue="11"></f:selectItem>
                            <f:selectItem itemLabel="12" itemValue="12"></f:selectItem>
                            <f:selectItem itemLabel="13" itemValue="13"></f:selectItem>
                            <f:selectItem itemLabel="14" itemValue="14"></f:selectItem>
                            <f:selectItem itemLabel="15" itemValue="15"></f:selectItem>
                            <f:selectItem itemLabel="16" itemValue="16"></f:selectItem>
                            <f:selectItem itemLabel="17" itemValue="17"></f:selectItem>
                            <f:selectItem itemLabel="18" itemValue="18"></f:selectItem>
                            <f:selectItem itemLabel="19" itemValue="19"></f:selectItem>
                            <f:selectItem itemLabel="20" itemValue="20"></f:selectItem>
                            <f:selectItem itemLabel="21" itemValue="21"></f:selectItem>
                            <f:selectItem itemLabel="22" itemValue="22"></f:selectItem>
                            <f:selectItem itemLabel="23" itemValue="23"></f:selectItem>
                            <f:selectItem itemLabel="24" itemValue="24"></f:selectItem>
                            <f:selectItem itemLabel="25" itemValue="25"></f:selectItem>
                            <f:selectItem itemLabel="26" itemValue="26"></f:selectItem>
                            <f:selectItem itemLabel="27" itemValue="27"></f:selectItem>
                            <f:selectItem itemLabel="28" itemValue="28"></f:selectItem>
                            <f:selectItem itemLabel="29" itemValue="29"></f:selectItem>
                            <f:selectItem itemLabel="30" itemValue="30"></f:selectItem>
                            <p:ajax update="totalAmount" listener="#{purchaseGrouponManagerBean.calculateTotalAmount}" /> 
                        </h:selectOneMenu>
                        <h:outputText value="X" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="$S #{purchaseGrouponManagerBean.selectedGroupon.groupon.offeredPrice}" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="=" style="font-weight:bold; font-size:12px"/>
                        <h:outputText value="$S #{purchaseGrouponManagerBean.totalAmount}" style="font-weight:bold; font-size:12px" id="totalAmount"/>

                    </h:panelGrid>
                </p:fieldset>
            </h:form>

            <br/>
            <br/>
            <p:fieldset style="width:950px">
                <f:view>
                <h:form id="form2">
                    <p:fieldset>
                        <h2>ALREADY A MEMBER ?</h2>
                        <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <h:graphicImage value="/images/buttons/ajax-loader-bar1.gif" />
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value="" />
                        </f:facet>
                        </p:ajaxStatus>
                         <p:messages />
                        <h:panelGrid id="loginPanel" columns="5" cellpadding="10">
                            <h:outputText value="Username" style="font-weight:bold; font-size:12px"/>
                            <p:inputText id="visitorUsername" required="true" requiredMessage="Please provide your username" value="#{purchaseGrouponManagerBean.username}"/>
                            <h:outputText value="Password" style="font-weight:bold; font-size:12px"/>
                            <h:inputSecret id="visitorPassword" required="true" requiredMessage="Please enter your password" value="#{purchaseGrouponManagerBean.password}"/>
                            <p:commandButton id="loginButton" update="form2" value="Log in" actionListener="#{purchaseGrouponManagerBean.loginVistor}" ajax="true" />                          
                        </h:panelGrid>
                    </p:fieldset>
                </h:form>
                    </f:view>
                <br/>
                <br/>
                <h2>NEW USER ?</h2>
                <h:form id="form3">
                        <p:messages id="visitorRegistrationMsg" />
                        <h:panelGrid columns="2" cellpadding="0">
                            <p:fieldset>
                                <h:outputText value="Step 1: Provide us your contact numbers" style="font-weight:bold; font-size:12px"/>
                                <h:panelGrid columns="2" cellpadding="0" style="text-align:justify; width:450px">
                                    <h:outputText value="Title*" style="text-align:right; font-size:12px"/>
                                    <p:inputText  value=""/>

                                    <h:outputText value="First name*" style="text-align:right; font-size:12px"/>
                                    <p:inputText  value=""/>

                                    <h:outputText value="Sir name*" style="text-align:right; font-size:12px"/>
                                    <p:inputText value=""/>

                                    <h:outputText value="Building number / Street*" style="text-align:right; font-size:12px"/>
                                    <p:inputText value=""/>

                                    <h:outputText value="City*" style="text-align:right; font-size:12px"/>
                                    <p:inputText value=""/>

                                    <h:outputText value="Country*" style="text-align:right; font-size:12px"/>
                                    <p:inputText value=""/>

                                    <h:outputText value="Postal Code*" style="text-align:right; font-size:12px"/>
                                    <p:inputText value=""/>

                                    <h:outputText value="Email Address*" style="text-align:right; font-size:12px"/>
                                    <p:inputText value=""/>

                                    <h:outputText value="Phone Number*" style="text-align:right; font-size:12px"/>
                                    <p:inputText value=""/>

                                    <h:outputText value="Date of Birth*" style="text-align:right; font-size:12px"/>
                                    <h:panelGrid columns="3" cellpadding="0">
                                        <h:selectOneMenu value="" id="day" >
                                            <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                                        </h:selectOneMenu>
                                        <h:selectOneMenu value="" id="month" >
                                            <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                                        </h:selectOneMenu>

                                        <h:selectOneMenu value="" id="year" >
                                            <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                                        </h:selectOneMenu>
                                    </h:panelGrid>
                                    <h:outputText value="Phone Number*" style="text-align:right; font-size:12px"/>
                                    <h:inputSecret value=""/>
                                    <h:outputText value="Phone Number*" style="text-align:right; font-size:12px"/>
                                    <h:inputSecret value=""/>
                                </h:panelGrid>
                            </p:fieldset>
                            <p:fieldset>
                                <h:outputText value="Step 2: Provide us your payment details" style="font-weight:bold; font-size:12px"/>

                                <h:panelGrid columns="2" cellpadding="0" style="width:430px">

                                </h:panelGrid>
                            </p:fieldset>
                        </h:panelGrid>
                        </h:form>
                    </p:fieldset>
        </h:body>
    </ui:define>
</ui:composition>